Browsing "Older Posts"

Browsing Category "sidebar widget"
Kali ini kita akan belajar untuk membuat widget recent post pada blog yang disertai dengan thumbmail dan juga jumlah komentar dari masing-masing postingan. Sebelumnya saya juga sudah membagikan cara membuat widget recent post yang keren, dan kali ini yang akan kita buat juga tidak akan kalah keren.

Dibawah ini adalah penampilah widget recent post yang akan kita buat :


Cara Membuat Widget Di Atas :

Langkah 1 : Silahkan masuk ke Blogger >> Dashboard >> Tata Letak >> Tambah Gadget

Langkah 2 : Pilih gadget HTML/Javascript pada pilihan yang tersedia

Langkah 3 : Silahkan masukkan kode di bawah ini ke kotak pop up yang keluar 

<div style="overflow:auto; width:100%px; max-height:500px; padding:10px; border:1px solid #999999;">
<style>
img.recent_thumb {padding-right:5px;padding-left:padding-bottom:0px;0px;width:55px;height:55px;border:0;float:left;margin:0 0 5px 0px;}
.recent_posts_with_thumbs {float: left;width: 100%;min-height: 50px;margin: 0px 0px 5px 0px;padding: 0;font-size:13px;font-color:black;}
ul.recent_posts_with_thumbs li {padding-bottom:5px;padding-top:0px;padding-left:0px;padding-right:20px;min-height:50px;list-style:normal;}
.recent_posts_with_thumbs a {text-decoration:none;}
.recent_posts_with_thumbs normal {font-size:13px;}
</style>
<script type="text/javascript" src="http://blogedek-javascript.googlecode.com/files/recentpoststhumb.js"></script>
<script type="text/javascript">
var numposts = 5;
var showpostthumbnails = true;
var displaymore = false;
var displayseparator = true;
var showcommentnum = true;
var showpostdate = false;
var showpostsummary = false;
var numchars = 75;
</script>
<script src="http://www.cofeemix.com/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=showrecentpostswiththumbs" type="text/javascript"></script></div>
Langkah 4 : Ganti www.cofeemix.com dengan alamat blog anda !

Nah setelah itu silahkan anda klik simpan dan anda telah menyelesaikannya. Mudah bukan? kalau anda masih bingung silahkan tinggalkan pertanyaan di kotak komentar yang tersedia.

Sebelumnya saya juga sudah berbari cara untuk membuat widget recent post yang keren, berikut adalah penampilannya.


Jika anda tertarik untuk membuat widget di atas, silahkan klik link berikut : Cara membuat widget recent post yang keren di blogger blog.

Cara Membuat Widget Recent Post Di Blog Dengan Thumbmail dan Jumlah Komentar

By Unknown →
Hallo bloggers, kali ini saya ingin berbagi cara baru nih. Kali ini kita akan belajar untuk membuat kotak twitter followers pada blog kita. Untuk penampilan dari kotak twitter follower ini sebenarnya hampir sama dengan kotak like pada facebook. Namun disini yang ditampilkan adalah followers dari akun twitter kita sahabat blogger.


Perlu anda ketahui bahwa salah satu cara untuk mempopulerkan akun twitter anda adalah melalui sebuah blog. Dengan memasang widget ini, kemungkinan untuk bertambahnya followers akun twitter anda akan bertambah.

Disamping hal tersebut, kita juga bisa menambah pengunjung blog kita apabila kita mempunyai followers twitter yang banyak. Jadi semuanya sebenarnya saling berhubungan. Nah, kotak follower twitter ini bekerja dengan baik ketika dipasang pada blog dengan platform blogger. Ya kurang lebih seperti blog yang sedang anda baca sekarang lah..

Bagaimana Cara Menampilkan Kotak Follower Twitter Pada Blogger?

Untuk menampilkan widget follower twitter, sebenarnya tidaklah sulit bagi anda. Cukup anda ikuti langkah-langkah yang akan saya berikan di bawah ini.

Langkah 1 : Masuk ke www.blogger.com >> Dashboard >> Tata Letak

Langkah 2 : Add Gadget >> HTML Javascript

Langkah 3 : Masukan kode di bawah ini ke dalam kotak yang muncul

<start twitter fan box –><script type="text/javascript"
src="http://s.moopz.com/fanbox_init.js"></script><div
id="twitterfanbox"><script
type="text/javascript">fanbox_init("sentotadipati");</script
type="text></div
id="twitterfanbox"> </start>
Langkah 4 : Simpan

Memang untuk membuat widget ini anda pasti tidak akan merasa kesulitan karena saya rasa ini mudah sekali. Namun jika anda merasa kesulitan atau kode yang saya berikan di atas tidak bekerja, saya mohon kesediaannya untuk meninggalkan komentar. Semua demi kebaikan bersama.

Oh iya, untuk mengeditnya, ganti sentotadipati dengan akun twitter yang kamu punya.

Membuat Kotak Follower Twitter Pada Blog Dengan Mudah

By Unknown →
Mungkin bagi anda yang mengutamakan penampilan blog anda, sebisa mungkin pasti akan selalu berinovasi dengan tampilan blog anda. Anda pasti mengupayakan agar tampilan blog anda lebih menarik untuk di lihat. Maka dari itu pada kesempatan kali ini saya akan membagikan tutorial cara membuat widget recent post anda semakin keren.

Membuat Widget Recent Post Lebih Keren

Dari gambar di atas kita sudah bisa melihat bahwa yang akan ditampilkan adalah gambar dari masing-masing postingan di blog anda. Maka dari itu akan membuat blog anda lebih menarik untuk dilihat dan pasti juga akan lebih hemat tempat dan fungsional.

Cara Untuk Membuat Widget Recent Post Lebih Keren !

Berikut adalah langkah-langkah yang mudah untuk anda ikuti, asalkan saja anda mau mengikutinya dengan seksama.

Langkah 1: Masuk ke blogger >> Dashboard >> Tata Letak >> Add Gadget

Langkah 2 : Pilih Gadget HTML/Javascript dari pilihan gadget yang keluar

Langkah 3 : Masukkan kode javascript di bawah ini ke kotak yang telah keluar


<div id='bp_recent'></div>
<script style='text/javascript' src='http://bloggergadgets.googlecode.com/files/recentposts_orig.js'></script>
<script style='text/javascript'>
var numberOfPosts = 20;
var showPostDate = false;
var showSummary = false;
var titleLength = 0;
var showCommentCount = false;
var showThumbs = true;
var showNoImage = true;
var imgDim = 55;
var imgFloat = 'left';
var myMargin = 5;
var mediaThumbsOnly = true;
var showReadMore = false;
</script>
<script src='http://www.cofeemix.com/feeds/posts/summary?max-results=20&orderby=published&alt=json-in-script&callback=bprecentpostswiththumbnails'></script>
</div>
Ganti www.cofeemix.com dengan alamat blog anda,

Langkah 4 : Simpan

Kalau sudah selesai silahkan anda lihat hasilnya, bagaimana jadinya sobat? Apakah anda berhasil untuk membuatnya? Saya rasa itu bukanlah hal yang sulit untuk anda lakukan.

Jika anda merasa tutorial kita kali ini bermanfaat, jangan lupa untuk mendukung membuat blog keren dengan follow blog ini atau bisa juga dengan like halaman facebook kami.

Membuat Recent Post Blog Anda Lebih Keren

By Unknown →
Sebelumnya saya sudah memberikan tutorial untuk membuat widget twitter tweet pada blogger. Dan sekarang saya akan memberikan tutorial untuk membuat widget twitter pada blogger versi 2. Kalau anda ingin tahu bagaimana pratinjaunya, silahkan lihat gambar widgetnya di bawah ini


Ada perbedaan sebenarnya antara widget ini dan widget sebelumnya. Widget ini mempunyai tweet yang dinamis. Yang saya maksud dinamis disini adalah tweet kita berjalan terus. Maka dari itu, widget ini harus kamu pasang ke blog anda agar performa blog anda menjadi maksimal.

Bagaimana Cara Membuat Widget Twitter Tersebut?

Untuk membuatnya sangat simple sekali sobat, anda cukup untuk mengikuti empat langkah yang akan saya berikan di bawah ini :

Langkah 1 : Masuk ke Blogger >> Dashboard >> Add Widget

Langkah 2 : Pilih HTML Javascript

Langkah 3 : Copy dan paste kode di bawah ini ke kotak yang muncul

<div style="text-align:center;margin:5px 5px;"><script src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
  version: 2,
  type: 'profile',
  rpp: 5,
  interval: 6000,
  width: 300,
  height: 250,
  theme: {
    shell: {
      background: '#940808',
      color: '#ffffff'
    },
    tweets: {
      background: '#faf7fa',
      color: '#000000',
      links: '#800000'
    }
  },
  features: {
    scrollbar: false,
    loop: true,
    live: true,
    hashtags: true,
    timestamp: true,
    avatars: false,
    behavior: 'default'
  }
}).render().setUser('sentotadipati').start();
</script>
</div>
Langkah 4 : Simpan

Di bawah ini merupakan live preview jika anda berhasil untuk membuat widget twitter pada blog anda :

Untuk cuztomize widget tersebut, silahkan perhatikan catatan di bawah ini :

* Ganti  dengan username twitter anda
* Untuk merubah tinggi widget yang anda buat ubah angka 300 pada kode width: 300 dengan lebar widget yang anda inginkan (Dalam pixel)
* Untuk merubah tinggi widget yang anda buat ubah angka 250 pada kode height: 250 dengan lebar widget yang anda inginkan (Dalam pixel)
* Untuk mengubah jumlah tweet yang akan muncul pada widget anda silahkan ganti angka 5 pada rpp: 5 dengan jumlah tweet yang anda kehendaki

Selesai sudah anda membuat widget twitter tweet pada blogger, widget ini paling cocok anda pasang pada sidebar blog anda. Dan dua kalimat terakhir dari saya. Semoga sukses.

Membuat Kotak Twitter Tweet Pada Blogger V2

By Unknown →
Pada kesempatan kali ini kita akan belajar untuk membuat widget berlangganan di blog. Ada beberapa jejaring sosial utama yang akan menunjang keberhasilan blog anda. Selain itu dengan memasang widget ini, akan menujang penampilan blog anda agar menjadi lebih keren.

Supaya anda tidak penasaran bagaimana jadinya nanti, saya sudah menyiapkan previewnya untuk anda. Di bawah merupakan pratinjau dari widget yang akan kita buat nantinya.


Salah satu cara untuk menmbah traffic/pengunjung di blog adalah dengan cara membangun komunitas blog anda. Untuk membangunnya anda bisa menggunakan jejaring sosial untuk menambah pembaca tetap blog anda. Dengan menambahkan widget ini diharapkan anda bisa mendapatkan pembaca tetap blog anda.

Bagaimana Cara Membuat Widget Berlangganan Dengan Jejaring Sosial Di Blogger?

Langkah 1 : Silahkan masuk ke blogger >> Dashboard >> Tata Letak

Langkah 2 : Pilih Add Gadget >> HTML Javascript

Langkah 3 : Masukkan kode di bawah ini di dalam kotak yang muncul

<style> #social a:hover { background-color: transparent;opacity:0.7; } #social img { -moz-transition: all 0.8s ease-in-out; -webkit-transition: all 0.8s ease-in-out; -o-transition: all 0.8s ease-in-out; -ms-transition: all 0.8s ease-in-out; transition: all 0.8s ease-in-out; } #social img:hover { -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); } </style> <center> <div id="social"><a title="Grab Our Rss Feed" href="http://feeds.feedburner.com/cofeemix" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuSUmbj2-X1l_Zlg7_XsfddJVv3qg8d7lFgwk_q_hz_uQ8uHq3oxWpLN41LsNJs0Fz881R1oSXXdxTSQx12clAa3iDHjWqe3Rhu_1m3NlNsMg5Z507nK5TDA5pmwtLjg0vOkjQnRRtsB_p/s1600/RSS-48x48.png" style="margin-right:1px;" alt="Icon"/></a><a rel="nofollow" title="Get Free Updates Via Email" href="http://feedburner.google.com/fb/a/mailverify?uri=Cofeemix&loc=en_US" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9YI_PPLyy-6awWHsObNbxST502QpOm61ksUpE0Su2nbFy1_XRfJHngtnBhu2bY8-xIsgvejy2JG7QbvjucSE2p6CnECI8VOT79J0P5qztvelanWy0o5xoLTAYEEZ3LLtEnEoF8qfjrOfL/s1600/RSS-EMAIL-48x48.png" style="margin-right:1px;" alt="Icon"/></a><a rel="nofollow" title="Like Our Facebook Page" href="https://www.facebook.com/BloggerKampusPerjuangan" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjavg4Vr96cedI7fhxaY-tsBLeEpHWm6lBDFtfehY4OCshQ34rqHAAEbKmHo6Z5ADZVD3LuT_fth5t2Z7sgiR16rFqXVPiSWaZsrOfaiLZg2clZ8aBL8lg4INaf2m2opqswbbSDv6G1Yj1z/s1600/FACEBOOK-48x48.png" style="margin-right:1px;" alt="Icon"/></a><a rel="nofollow" title="Follow Our Updates On Twitter" href="https://www.twitter.com/sentotadipati" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKVmDoW6P7pkZo5NJ8Zk-9y4exEPudblqlaFX8iaH9OaoJm_j7JB3kk3XLLHfCaVoywBeKvEjCDeAFLd-7pmjrKkgSQdPwadvi4UeYhgW_M2RsTp9zIASUC1U9xEd7gTSSL_3JWLw-WPSY/s1600/TWITTER-48x48.png" style="margin-right:1px;" alt="Icon"/></a><a title="Follow Us On Google+" rel="nofollow" href="https://plus.google.com/u/0/104621038232382151049/posts" target="_blank"><img style="margin-right:1px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxjdu4StsfU4TKCS6veZR-f-91oaX4-w_CPWJg8wDcE-i7rsLLTLCillUYPqT-dxjGKgzzbRbKw5LgXm8xIJGZl2Lzs5KWAsBkr2xboVH7hbl5M64fHKObFltTI84dsrbIIubYN4A3K89y/s1600/GOOGLE-PLUS-48x48.png"/></a><a title="Follow Our Pins" rel="nofollow" href="http://pinterest.com/bayuadipati/" target="_blank"><img style="margin-right:1px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghqUwDBWn89uS6070VUHwlxA0JyYph76vu3vV_7AZzLcTIaQSjBvnCVf5AQ-7au4zxnLg0PnK2BLfeODzbUCmTFGkzjir8hgzZ5Bwe9HNhpUOawEpR7JXo9HlpN78Gk2RDPKlHV_AgVaFs/s1600/PINTEREST-48x48.png" alt="Follow Me on Pinterest" /></a></div></center>
Untuk menggunakan widget tersebut, anda harus merubah beberapa kode di atas dengan profil jejaring sosial yang anda gunakan. Misalkan saja akun twitter, halaman facebook dan lain sebagainya.

Cara untuk mengeditnya :

*) Ganti http://feeds.feedburner.com/cofeemix  Dengan alamat feedburner anda
*) Ganti Cofeemix  Dengan id feedburner anda
*) Ganti  https://www.facebook.com/BloggerKampusPerjuangan Dengan alamat halaman facebook yang anda punya.
*) Ganti  https://www.twitter.com/sentotadipati Dengan alamat profil twitter anda
*) Ganti  https://plus.google.com/u/0/104621038232382151049 Dengan dengan alamat google+ anda
*) Ganti  http://pinterest.com/bayuadipati Dengan akun pinterest anda

Langkah 4 : Simpan

Nah, kalau sudah selesai silahkan lihat hasilnya dan coba anda klik satu per satu untuk meyakinkan anda jika widget yang anda buat berjalan dengan baik. Sekian dari saya jika ada pertanyaan silahkan tinggalkan komentar di bawah

Membuat Widget Berlangganan Dengan Jejaring Sosial Yang Keren Abis

By Unknown →
Pada kesempatan kali ini kita akan belajar untuk membuat widget twitter widget di blogger. Seperti yang kita ketahui bersama bahwa di Indonesia twitter menjadi salah satu jejaring sosial yang mempunyai banyak pengguna. Ini merupakan salah satu fenomena tersendiri untuk warga negara kita yang diakui atau tidak bahwa warga negara kita ingin populer di dunia maya.



Salah satu cara untuk mebuat diri anda menjadi populer atau mungkin akun twitter anda ingin terlihat di blog anda, anda bisa memasang widget twitter ini. So, tidak usah lama-lama kita langsung masuk bagaimana cara untuk membuat widget twitter tweet pada blogger.

Cara Membuat Widget Twitter Tweet Pada Blogger

Langkah 1 : Masuk ke Blogger >> Dashboard >> Add Gadget

Langkah 2 : Pilih HTML Javascript

Langkah 3 : Kemudian masukkan kode dibawah ke kotak yang muncul

<script charset="utf-8" src="http://widgets.twimg.com/j/2/widget.js"></script><script>new TWTR.Widget({  version: 2,type: 'profile',rpp: 3,interval: 30000,width: 240,height: 250,theme: {shell: {background: '#33ccff',color: '#ffffff'},tweets: {background: '#ffffff',color: '#333333',links: '#33ccff'}},features: {scrollbar: true,loop: false,live: true,hashtags: true,timestamp: true,avatars: true,behavior: 'all'}}).render().setUser('sentotadipati').start();</script>
Langkah 4 : Simpan

Kalau langkah yang anda lakukan berhasil, anda akan mendapati widget tersebut seperti live preview di bawah ini :

Untuk cuztomize widget tersebut :

* Ganti sentotadipati dengan username twitter anda
* 240 merpakan lebar widget anda, 250 merupakan tinggi dari widget anda.
* Angka 3 pada rpp: 3  merupakan jumlah tweet yang ditampilkan pada widget yang anda buat

Nah, demikian dulu update saya kali ini, jika ada pertanyaan silahkan tinggalkan komentar. Manfaatkanlah kotak komentar di bawah ini dengan sebaik-baiknya. 

Memasang Widget Twitter Tweet Pada Blogger Blog

By Unknown →

Sering kali gagal untuk membuat widget sosial subscriptions di bawah postingan blog membuat saya berkeinginan untuk berbagi cara untuk membuatnya kepada anda. Oleh karena itu, disini kita akan belajar untuk membuat widget sosial subscription pada blogger blog.

Sebelumnya saya akan memberikan keuntungan yang bisa kamu dapatkan. Memasang widget ini akan membuat pengunjung blog anda bisa dengan mudah untuk mendapatkan update artikel blog anda. Ini artinya jika mereka tertarik dengan apa yang anda tulis, maka mereka akan membuka dan membaca blog anda.

Maka dari itu, membuat widget sosial subscription akan menambah traffic pengunjung blog anda. Selain itu, blog anda akan semakin populer dengan mendapatkan banyak pengunjung.

Selain widget sosial subscription yang ada di bawah postingan blog kamu, kamu juga bisa menambahkan wideget sosial subscription di sidebar blog kamu.

Cara Membuat Widget Sosial Subscription Yang Keren Pada Blogger Blog


Sebenarnya untuk membuat widget ini tidak terlalu sulit, namun pemahaman yang kurang akan membuat anda gagal untuk membuatnya. Maka dari itu, silahkan ikuti langkah-langkah di bawah ini untuk membuat widget sosial subscription pada blog anda.

Live Demo

Langkah 1 : Login blogger >> Dashboard >> Template

Catatan : Pastikan setiap anda ingin edit HTML blog kamu, kamu backup dulu template yang anda gunakan.

Langkah 2 : Check Expand widget template

Langkah 3 : Temukan kode di bawah ini :

<data:post.body/>

Langkah 4 : Copy dan paste kode di bawah ini tepat di bawah kode <data:post.body/>

<b:if cond='data:blog.pageType == "item"'>
<style>
.RBstyle{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSoNDZOS08eEKeyuaJQk_2rd7rWcds1cHgoGiigu7YJJlx8P9DSXWes39DOGu8sD-SzAykPTPtyvRyKfNrvnU5bQV1LrP7VnTYJoM7u-uTYtbAurhltB41cNpK2JM13K2MGJ28lh_0jsPr/s400/email_icon.png) no-repeat scroll 4px center transparent;
padding:7px 15px 7px 35px;
color:#666;
font-weight:bold;
text-decoration:none;
border:1px solid #D3D3D3;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
-moz-box-shadow: 1px 1px 2px #CCC inset;
-webkit-box-shadow: 1px 1px 2px #CCC inset;
box-shadow: 1px 1px 2px #CCC inset;
}
.RBsubmit{
color:#666;
font-weight:bold;
text-decoration:none;
padding:6px 15px;
border:1px solid #D3D3D3;
cursor: pointer;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
-goog-ms-border-radius: 4px;
border-radius: 4px;
background: #fbfbfb;
background: -moz-linear-gradient(top, #fbfbfb 0%, #f4f4f4 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fbfbfb), color-stop(100%,#f4f4f4));
background: -webkit-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
background: -o-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
background: -ms-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FBFBFB', endColorstr='#F4F4F4',GradientType=0 );
background: linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
}
</style>
<center>
<div id='emailwidget-outer'>
<div id='emailwidget'>
<table style='border:none; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;' width='100%'>
<tbody>
<tr style='border:none; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;'>
<td align='left' style='border:none; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 15px;'> <p style='color:#008E00; font-size: 15px; margin:0px 0px 5px 0px; '>
Get free daily email updates!</p>
<form action='http://feedburner.google.com/fb/a/mailverify' class='feedburner' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri= cofeemix', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' style='margin: 0pt;' target='popupwindow'>

<input name='uri' type='hidden' value='Realcombiz'/>
<input name='loc' type='hidden' value='en_US'/>
<input class='RBstyle' name='email' onblur='if (this.value == "") {this.value = "Enter your email…";}' onfocus='if (this.value == "Enter your email…") {this.value = ""}' type='text' value='Enter your email…'/>
<input alt='' class='RBsubmit' title='' type='submit' value='Submit'/>
</form>
</td>
<td style='border:none; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;'><p style='color:#008E00; font-size: 14px; margin:0px 0px 5px 0px; '>
Follow us!</p>
<a href='http://feedburner.google.com/fb/a/mailverify?uri=cofeemix' rel='nofollow' target='_blank' title='Suscribe to RSS Feed'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDNcrHG2AMsiWD2svbRZbGzxhgGwfrnyj-Xzqe3NNXzSMB_U5z47XAvH8cXWOPRJnpKaYBpp_QQBhYZ3QzGsrG61St9dg4liV8W4G_PO9HCv528qcLkL7oryXx988QnedmB3Rnf60Xtuk/s1600/rss-30×43.png'/></a>
<a href='http://twitter.com/sentotadipati' rel='nofollow' target='_blank' title='Follow us on Twitter'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgl2vaRh4e-kHU447B79S8qE97Pomy-GtwwozJVoF0s0ZGG_7IZBW40YS9YdEM5UEzd1yFoljhxJnnzM01PD5U-NTDhAdKJBjwomq1TG98DIZadVV1MKpIykiW3McryRNP95VPl0VoKmoU/s1600/twitter-30×43.png'/></a>
<a href='http://www.facebook.com/bloggerkampusperjuangan' rel='nofollow' target='_blank' title='Follow us on Facebook'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-rukK_YTVNaBhnf-zgGXgU68BziEgokANhB-8yced9hKMh117LIX6BDkcYU_LCXjKYdXg_070B4AZiquVoFU1Rm34E8XcRPI1aNZ12CzCHYJKcMwhfiCwJctG0LOvzzkJTaGDsRCdIvg/s1600/facebook-30×43.png'/></a>
<a href='https://plus.google.com/108358802743279232329' rel='nofollow' target='_blank' title='Follow us on Google+'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpgXYQRGoT3zTrypJ9-PoEzI7Uyg2Dp8t3_n-_ha4psBDb0JcRPk5QBfkKMMdLHCtryQfk5yqQcopMNudSKjWeHELDNbIsjdgZMe_P_9spgsGDbJLD0E7LekgJQRi-MdnhVb9UNyvlz9A/s1600/googleplus-30×43.png'/></a>
</td>
</tr>
</tbody></table>
</div>
</div>
</center>
</b:if>

Catatan : Sebelum anda simpan template anda, pastikan kode di atas bekerja dengan baik dengan klik pratinjau. Jika terjadi eror, jangan bingung. Mungkin kode di atas perlu di pharse terlebih dahulu. Klik disini untuk pharse HTML.

Langkah 5 : Simpan Template !

Mudah bukan ? Nah sekarang kita masuk bagaimana cara untuk mengedit widget sosial subscription tersebut agar sesuai dengan profil jejaring sosial anda. Ikuti langkah di bawah :

Ganti user id di bawa yang telah saya beri warna dengan user id anda :

Ganti cofeemix dengan rss feed anda !

Ganti sentotadipati dengan user name twitter anda !

Ganti bloggerkampusperjuangan dengan facebook fans page id anda !

Ganti 108358802743279232329 dengan google+ id anda !

Nah, kalau kamu sudah berhasil untuk membuatnya, jangan lupa tinggalkan komentar di bawah ! Dan juga jangan lupa untuk like facebook fans page kami. Terima kasih anda telah membaca cara membuat sosial subscription widget pada blogger blog.

Membuat Subscription Widget Blog Keren Di Bawah Postingan Blog

By Unknown →
Jejaring sosial merupakan alat yang paling ampuh untuk membangun traffic ke blog anda selain dari mesin pencari google tentunya. Maka dari itu, memanfaatkan jejaring sosial untuk membangun traffic ke blog kamu merupakan sebuah kewajiban yang harus kamu lakukan.

Sekarang yang menjadi pertanyaan adalah bagaimana caranya membangun lalu lintas blog dari jejaring sosial tersebut?

Salah satu cara yang bisa kamu lakukan adalah membangun pelanggan blog kamu melalui jejaring sosial dengan menggunakan widget email subscription. Selain bisa berlangganan lewat email, pembaca blog kamu bisa juga untuk berlangganan postingan blog kamu melalui facebook, twitter, ataupun melalui google+.

Baca Juga :



Memperkenalkan widget thesis email subscription. Widget ini sangat keren sekali dan cocok untuk blog anda yang ingin tampil profesional. Dibawah ini merupakan pratinjau dari thesis email subscription.



Cara Membuat Widget Thesis Email Subscription Pada Blogger

Step 1 : Login Blogger >> Add Gadget >> HTML/Javascript

Step 2 : Copy dan paste kode di bawah ini di kotak yang sudah keluar


<!-- Bloggiks Email Subscription Multi Widget Thesis Style-->
<div id="sidebars">
<ul class="sidebar_list">
<li id="social-profiles">
<ul>
<li>
<a class="social facebook" rel="nofollow" target="_blank" title="Facebook FanPage" href="YOUR FACEBOOK PROFILE LINK">Facebook</a>
</li>
<li>
<a class="social twitter" rel="nofollow" target="_blank" title="Twitter Profile" href="YOUR TWITTER  PROFILE LINK">Twitter</a>
</li>
<li>
<a class="social googleplus" rel="nofollow" target="_blank" title="GooglePlus" href="YOUR GOOGLE+ PROFILE LINK">GooglePlus</a>
</li>
<li>
<a class="social rss" rel="nofollow" target="_blank" title="RSS" href="http://feeds.feedburner.com/FEEDBURNER ID">Rss</a>
</li>
<li>
<a class="social youtube" rel="nofollow" target="_blank" title="Youtube Channel" href="http://www.youtube.com/YOUR YOUTUBE CHANNEL USERNAME">Youtube</a>
</li>
</ul>
</li>
<li id="sidebar-social">
<p id="email-notice">
Join this Awesome Blogger Community and receive free email updates!
<span></span>
</p>
<div id="email-form">
<h6>Get Email Updates</h6>
<form class="nice custom" style="" action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=bloggiks', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<input class="input-text" type="text" name="email" onblur="if (this.value == '') {this.value = 'Enter Your Email Address';}" onfocus="if (this.value == 'Enter Your Email Address') {this.value = '';}" value="Enter Your Email Address">
<input type="hidden" value="bloggiks" name="uri">
<input type="hidden" name="loc" value="en_US">
<input class="button" type="submit" value="Subscibe">
<p>
We never encourage SPAM
<br>
You can Unsubscribe any time
</p>
</form>
<span style=" line-height:0px; font-size:8px; font-weight:bold; margin-left:270px;
   ">
 <a style="color:#000000;" href="http://bloggiks.com/search/label/widgets">widgets</a> </span>
</div>
</li>
</ul>
</div>
<style>
 #sidebars {
    border: 0 none;
    float: right;
    padding: 0 15px;
    width: 310px;
}
#email-notice {
    background: none repeat scroll 0 0 #DF6001;
    color: #FFFFFF;
    font-size: 14px;
    line-height: 1.5;
    margin: 0 0 20px;
    padding: 15px 20px;
    position: relative;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2);
}
#email-notice span {
    border-left: 14px solid transparent;
    border-right: 14px solid transparent;
    border-top: 10px solid #DF6001;
    bottom: -10px;
    height: 0;
    position: absolute;
    right: 40px;
    width: 0;
}
#email-form {
    background: none repeat scroll 0 0 padding-box #313131;
    border-bottom: 5px solid #202020;
    border-radius: 2px 2px 2px 2px;
    text-shadow: 0 -1px 0 #000000;
}
#email-form h6 {
    color: #FFFFFF;
    font-family: arial;
    font-size: 16px;
    font-weight: bold;
    letter-spacing: 0;
    padding: 15px 20px 0;
    text-transform: none;
}
#email-form form {
    color: #FFFFFF;
    margin: 0;
    padding: 20px 18px;
}
#email-form input.input-text {
    background: none repeat scroll 0 0 #FFFFFF;
    border: 1px solid #222222;
    margin: 0 0 10px;
    padding: 8px;
    width: 94%;
}
#email-form .button {
    background: none repeat scroll 0 0 #FFFFFF;
    float: right;
    margin: 0 0 0 10px;
}
#email-form p {
    color: #CCCCCC;
    font-size: 12px;
    line-height: 18px;
    margin: 0;
}
#sidebar-social {
    float: left;
    font-size: 12px;
    margin: 0 0 15px;
    width: 100%;
}
ul.sidebar_list {
    list-style: none outside none;
}
li.widget ul {
    list-style: none outside none;
}
#social-profiles {
    float: left;
}
#social-profiles ul {
    float: left;
    list-style: none outside none;
    margin: 0 5px 20px;
}
#social-profiles ul li {
    float: left;
}
#social-profiles ul li a {
    display: block;
    float: left;
    height: 32px;
    margin: 0 15px;
    text-indent: -999em;
    width: 32px;
}
#social-profiles a.social {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGo3m22SQ1KHBEPL4ISXgRfZP3IyMAF3aqM4uD0L0OsdUASeaLQF6SIsJmDuiB6e0iS4-VxYsp-7EblT73gvDurH_nfG_DzhCfQiBFDcNcSjdjRJQk5Ws0OiKDaUoaIbDL-0w-DCQyBbA/s1600/social.png") no-repeat scroll 0 0 transparent;
}
#social-profiles a.facebook {
    background-position: -79px 0;
    height: 32px;
    margin: 0 15px 0 5px;
    width: 32px;
}
#social-profiles a.facebook:hover {
    background-position: -79px -74px;
    height: 32px;
    width: 32px;
}
#social-profiles a.twitter {
    background-position: -5px -111px;
    height: 32px;
    width: 32px;
}
#social-profiles a.twitter:hover {
    background-position: -42px 0;
    height: 32px;
    width: 32px;
}
#social-profiles a.youtube {
    background-position: -42px -37px;
    height: 32px;
    width: 32px;
}
#social-profiles a.youtube:hover {
    background-position: -5px -37px;
    height: 32px;
    width: 32px;
}
#social-profiles a.rss {
    background-position: -42px -74px;
    height: 32px;
    width: 32px;
}
#social-profiles a.rss:hover {
    background-position: -79px -37px;
    height: 32px;
    width: 32px;
}
#social-profiles a.googleplus {
    background-position: -5px 0;
    height: 32px;
    width: 32px;
}
#social-profiles a.googleplus:hover {
    background-position: -5px -74px;
    height: 32px;
    width: 32px;
}
* {
    margin: 0;
    padding: 0;
}
.custom .sidebar ul.sidebar_list {
    padding: 15px 0;
}
</style>
Step 3 : Ganti kode yang saya beri warna merah dengan id jejaring sosialmu (Url).

Catatan : Kamu juga bisa merubah kode yang saya beri warna hijau sesuai dengan kehendakmu.

Step 4 : Simpan !


Sekarang kamu sudah menyelesaikan membuat thesis email subscription widget, saya berharap dengan menggunakan template tersebut, blog kamu bisa ramai pengunjung.

Cara Membuat Widget Email Subscribtion Thesis Pada Blogger

By Unknown →